<template>
    <div class="login-log-container">
        <!-- 表单搜索项 -->
        <el-form :model="params">
            <el-row :gutter="20">
                <el-col :span="6">
                    <el-form-item label="项目编码">
                        <el-input v-model="params.projectNo" placeholder="请输入项目编码" clearable></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="项目名称">
                        <el-input v-model="params.projectName" placeholder="请输入项目名称" clearable></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="项目类型">
                        <el-select v-model="params.projectType" placeholder="请选择项目类型" @change="handleStatusChange">
                            <el-option label="设备保养" value="0" />
                            <el-option label="设备点检" value="1" />
                        </el-select>
                    </el-form-item>
                </el-col>

                <el-button type="primary" :icon="Search" @click="handleSearch">搜索</el-button>
                <el-button type="primary" plain :icon="Refresh" @click="handleReset">重置</el-button>
            </el-row>
        </el-form>
        <!-- 按钮组 -->
        <el-row class="button-group">
            <el-col :span="10">
                <div>
                    <el-button type="primary" :icon="Plus" plain @click=openInsert>新增</el-button>
                    <el-button type="success" plain :disabled="isSingleRowSelected" :icon="EditPen"
                        @click="openUpdate(selectedRow)">修改</el-button>

                    <el-button type="danger" plain :disabled="deleteDisabled" :icon="Delete"
                        @click="handleDelete">删除</el-button>
                    <el-button type="danger" plain :icon="Delete" @click="clearAll">清空</el-button>
                </div>
            </el-col>
            <el-col :span="14">
                <div class="button-right">
                    <el-tooltip content="隐藏搜索" placement="top">
                        <el-button :icon="Search" circle />
                    </el-tooltip>
                    <el-tooltip content="刷新" placement="top">
                        <el-button :icon="Refresh" circle />
                    </el-tooltip>
                </div>
            </el-col>
        </el-row>
        <!-- 数据表格 -->
        <el-row>
            <el-table :data="tableData" style="width: 100%" @selection-change="handleSelectionChange">
                <el-table-column type="selection" :selectable="selectable" width="40" />

                <el-table-column prop="projectNo" label="项目编码" align="center" />

                <el-table-column prop="projectType" label="项目类型" align="center">
                    <template #default="scope">
                        <el-tag :type="scope.row.projectType === '0' ? 'success' : 'danger'">
                            {{ scope.row.projectType === '0' ? '设备保养' : '设备点检' }}
                        </el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="projectContent" label="项目内容" align="center" />
                <el-table-column prop="standard" label="标准" sortable align="center" />

                <el-table-column prop="enable" label="是否启用" align="center">
                    <template #default="scope">
                        <el-tag :type="scope.row.enable === '0' ? 'success' : 'danger'">
                            {{ scope.row.enable === '0' ? '是' : '否' }}
                        </el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="remark" label="备注" align="center" />
                <el-table-column label="操作" width="200px">
                    <template #default="scope">
                        <el-button :row="scope.row" type="primary" @click="openUpdate(scope.row)" text size="small"
                            :icon="EditPen">修改</el-button>
                        <el-button type="danger" text size="small" :icon="Delete" :row="scope.row"
                            @click="deleteItem(scope.row)">删除</el-button>


                    </template>
                </el-table-column>
            </el-table>
        </el-row>
        <!-- 分页组件 -->
        <el-row>
            <el-col :span="24">
                <div class="demo-pagination-block">
                    <el-pagination :current-page="params.currentPage" :page-size="params.pageSize" background
                        :default-page-size="params.pageSize" :page-sizes="pageSizes"
                        layout="total,sizes,prev,pager,next,jumper" :total="pageResult.total"
                        @size-change="handleSizeChange" @current-change="handleCurrentChange">
                    </el-pagination>
                </div>
            </el-col>
        </el-row>

        <el-dialog v-model="dialogFormVisible" :title="title" width="800" @close="closeDialog">
            <el-form :model="form">
                <el-row :gutter="20">
                    <el-col :span="12">
                        <el-form-item label="项目编码" :label-width="formLabelWidth">
                            <el-input v-model="form.projectNo" />
                        </el-form-item>
                        <template>
                            <el-input v-model="input" />
                        </template>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="设备项目名称" :label-width="formLabelWidth">
                            <el-input v-model="form.projectName" />
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="20">
                    <el-col :span="12">
                        <el-form-item label="项目类型" :label-width="formLabelWidth">
                            <el-radio-group v-model="form.projectType">
                                <el-radio label="0">设备项目名称</el-radio>
                                <el-radio label="1">设备点检</el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="是否启用" :label-width="formLabelWidth">
                            <el-radio-group v-model="form.enable">
                                <el-radio label="0">是</el-radio>
                                <el-radio label="1">否</el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </el-col>

                    <el-col :span="24">
                        <el-form-item label="项目内容" :label-width="formLabelWidth">
                            <el-input v-model="form.projectContent" type="textarea" :rows="3" placeholder="请输入项目内容"
                                style="width: 100%;"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="标准" :label-width="formLabelWidth">
                            <el-input v-model="form.standard" type="textarea" :rows="2" placeholder="请输入标准"
                                style="width: 100%;"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="dialogFormVisible = false">取消</el-button>
                    <el-button type="primary" @click="confirmAdd">确认</el-button>
                </div>
            </template>

        </el-dialog>


    </div>
</template>

<script setup>
import { deletespotInspection, getspotInspectionfind, insertspotInspection, updatespotInspection } from '@/apis/zs/index'
import { onMounted, ref, reactive } from 'vue';
import { Search, Refresh, Delete } from '@element-plus/icons-vue'
import { ElMessage, ElMessageBox } from 'element-plus'

const dialogFormVisible = ref(false)
const title = ref('')
const projectNo = ref([]) // 选中行的id数组
const tableData = ref([])   // 表格数据
const pageResult = ref({}) // 分页数据
const deleteDisabled = ref(true) // 删除按钮禁用状态, 默认禁用

const openInsert = () => {
    dialogFormVisible.value = true
    title.value = '新增设备点检保养项目';
}

const openUpdate = (row) => {
    dialogFormVisible.value = true
    title.value = '修改设备点检保养项目';
    form.projectNo = row.projectNo
    form.projectName = row.projectName
    form.projectType = row.projectType
    form.projectContent = row.projectContent
    form.standard = row.standard
    form.enable = row.enable
}

// 点击新增
const form = reactive({
    projectNo: '',
    projectName: '',
    projectType: '0', // 使用数组以便可以存储多个选中值
    projectContent: '',
    standard: '',
    enable: '0' // 默认启用
})

// 搜索参数
const params = ref({
    currentPage: 1,
    pageSize: 2,
    projectNo: '',
    projectName: '',
    projectType: '',
})

// 分页大小
const pageSizes = [2, 5, 8, 10]

onMounted(async () => {
    // 加载项目数据
    pageResult.value = await getspotInspectionfind(params.value)
    tableData.value = pageResult.value.records
})

/**
 * 处理搜索
 */
const handleSearch = async () => {
    pageResult.value = await getspotInspectionfind(params.value)
    tableData.value = pageResult.value.records
}

/**
 * 处理重置
 */
const handleReset = async () => {
    params.value = {
        currentPage: 1,
        pageSize: 2,
        projectNo: '',
        projectName: '',
        projectType: ''
    }
    pageResult.value = await getspotInspectionfind(params.value)
    tableData.value = pageResult.value.records
}

/**
 * 处理分页大小变化
 */
const handleSizeChange = async (size) => {
    params.value.pageSize = size
    pageResult.value = await getspotInspectionfind(params.value)
    tableData.value = pageResult.value.records
}

/**
 * 处理当前页码变化
 */
const handleCurrentChange = async (currentPage) => {
    params.value.currentPage = currentPage
    pageResult.value = await getspotInspectionfind(params.value)
    tableData.value = pageResult.value.records
}

/**
 * 处理选中行变化
 */
const handleSelectionChange = (val) => {
    deleteDisabled.value = !val.length
    projectNo.value = val.map(item => item.projectNo) // 获取选中项的项目编码
}

/**
 * 处理删除选中行
 */
const handleDelete = () => {
    ElMessageBox.confirm(`是否确认删除访问编号为${projectNo.value.join(',')}的数据项？`, '系统提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
    }).then(async () => {
        await deletespotInspection(projectNo.value)
        pageResult.value = await getspotInspectionfind(params.value)
        tableData.value = pageResult.value.records
        projectNo.value = [] // 重置选中行的id数组
        ElMessage({ type: 'success', message: '删除成功' })
    }).catch(() => {
        ElMessage({ type: 'info', message: '已取消删除' })
    })
}

/**
 * 删除单行项目
 */
const deleteItem = (row) => {
    ElMessageBox.confirm(`是否确认删除设备类型编码为${row.projectNo}的数据项？`, '系统提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
    }).then(async () => {
        await deletespotInspection([row.projectNo]);
        tableData.value = tableData.value.filter(item => item.projectNo !== row.projectNo);
        ElMessage({ type: 'success', message: '删除成功' });
    }).catch(() => {
        ElMessage({ type: 'info', message: '已取消删除' });
    });
};

/**
 * 确认新增或修改
 */
let confirmAdd = async () => {
    if (title.value === '新增设备点检保养项目') {
        await insertspotInspection(form);
        ElMessage.success('新增成功');
    } else {
        await updatespotInspection(form);
        ElMessage.success('修改成功');
    }
    dialogFormVisible.value = false;
    pageResult.value = await getspotInspectionfind(params.value)
    tableData.value = pageResult.value.records
};

// 重置表单数据
const resetForm = () => {
    form.projectNo = '';
    form.projectName = '';
    form.projectType = '0'; // 重置为数组
    form.projectContent = '';
    form.standard = '';
    form.enable = '0'; // 默认选中
};

const closeDialog = () => {
    resetForm();
    title.value = '';
};

</script>

<style scoped>
.dividing-line {
    text-align: center;
}

.button-right {
    text-align: right;
}

.button-group {
    margin-top: 20px;
    margin-bottom: 10px;
}

.demo-pagination-block .el-pagination {
    justify-content: end;
    margin-top: 20px;
}
</style>
